<template>
	<view class="luch-audio__warp">
		<view class="luch-audio__cover" :class="{ 'luch-audio--cover-bg': !poster }">
			<image :src="poster" v-if="poster" class="luch-audio__cover-img"></image>
			<view class="luch-audio__play-btn" :class="{ 'luch-audio--btn-pause': videoIsPlay }" @click="handleBtnClick"></view>
		</view>
		<view class="luch-audio__audio-con">
			<view class="luch-audio__audio-info">
				<text class="luch-audio__audio-title luch-audio--text-eill">{{ name }}</text>
				<text class="luch-audio__audio-author luch-audio--text-eill">{{ author }}</text>
			</view>
			<view class="luch-audio__audio-time">{{ audioTimeUpdate }}</view>
		</view>
	</view>
</template>

<script>
/**
 * luch-audio
 * @module luch-audio
 * @Author lu-ch
 * @Date 2022-07-14
 * @Email webwork.s@qq.com
 * @description 音频播放组件，使用了createInnerAudioContext
 */
/**
 * Props itemsProps
 * @prop {Boolean} play - 是否播放，双向绑定，绑定时需使用.sync 如果为true 则播放，为false 则暂停
 * ... 其他api同文档 （https://uniapp.dcloud.io/api/media/audio-context?id=createinneraudiocontext）
 */
/**
 * 将秒转换为 分:秒
 * @param {Number} s - 秒数
 */
function sToHs(s) {
	//计算分钟
	//算法：将秒数除以60，然后下舍入，既得到分钟数
	let h;
	h = Math.floor(s / 60);
	//计算秒
	//算法：取得秒%60的余数，既得到秒数
	s = s % 60;
	//将变量转换为字符串
	h += '';
	s += '';
	//如果只有一位数，前面增加一个0
	h = h.length === 1 ? '0' + h : h;
	s = s.length === 1 ? '0' + s : s;
	return h + ':' + s;
}
export default {
	name: 'ComAudio',
	props: {
		// 是否播放或暂停
		play: {
			type: Boolean,
			default: false
		},
		// 播放src
		src: {
			type: String
		},
		poster: {
			type: String,
			default: ''
		},
		name: {
			type: String,
			default: '未知音频'
		},
		author: {
			type: String,
			default: '未知作者'
		},
		autoplay: {
			type: Boolean
			// default: false
		},
		loop: {
			type: Boolean
			// default: false
		},
		// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-LARK || MP-JD || MP-KUAISHOU
		obeyMuteSwitch: {
			type: Boolean
			// default: true
		},
		// #endif
		// 初始化回调
		initAudio: {
			type: Function
		},
		// 自定义组件标识
		index: {
			type: [String, Number]
		}
	},
	data() {
		return {
			audioTimeUpdate: '00:00',
			videoIsPlay: false
			// innerAudioContext: ''
		};
	},
	watch: {
		play(n) {
			// this.videoIsPlay = play
			if (n) {
				!this.videoIsPlay && this.audioPlay();
			} else {
				this.videoIsPlay && this.audioPause();
			}
		},
		src() {
			this.audioDestroy();
			this.contextInit();
		}
	},
	created() {
		this.contextInit();
	},
	beforeDestroy() {
		this.audioDestroy();
	},
	methods: {
		audioPlay() {
			this.innerAudioContext && this.innerAudioContext.play();
		},
		audioPause() {
			this.innerAudioContext && this.innerAudioContext.pause();
		},
		audioOnPlay() {
			this.videoIsPlay = true;
			this.$emit('update:play', true);
		},
		audioOnPause() {
			this.videoIsPlay = false;
			this.$emit('update:play', false);
		},
		audioDestroy() {
			this.innerAudioContext && this.innerAudioContext.destroy && this.innerAudioContext.destroy();
			this.audioPropInit();
		},
		audioControls() {
			if (this.videoIsPlay) {
				this.audioPause();
			} else {
				this.audioPlay();
			}
		},
		handleBtnClick() {
			// this.videoIsPlay = !this.videoIsPlay
			this.audioControls();
			this.$emit('update:play', this.videoIsPlay);
		},
		contextInit() {
			let that = this;
			that.$emit('update:play', false);
			if (!that.src) {
				if (process.env.NODE_ENV !== 'production') {
					console.warn(`[luch-audio warn]: 'src' 为空`);
				}
				return;
			}
			let innerAudioContext = uni.createInnerAudioContext();
			innerAudioContext.autoplay = that.autoplay;
			innerAudioContext.loop = that.loop;
			// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-LARK || MP-JD || MP-KUAISHOU
			if (typeof that.obeyMuteSwitch === 'boolean') {
				innerAudioContext.obeyMuteSwitch = that.obeyMuteSwitch;
			}
			// #endif
			innerAudioContext.onPlay((...arg) => {
				that.audioTimeUpdate = sToHs(Math.floor(innerAudioContext.currentTime));
				that.audioOnPlay();
				that.$emit('onPlay', ...arg);
			});
			innerAudioContext.onPause((...arg) => {
				that.audioOnPause();
				that.$emit('onPause', ...arg);
			});
			innerAudioContext.onEnded((...arg) => {
				that.audioOnPause();
				that.$emit('onEnded', ...arg);
			});
			innerAudioContext.onTimeUpdate((...arg) => {
				that.audioTimeUpdate = sToHs(Math.floor(innerAudioContext.currentTime));
				that.$emit('onTimeUpdate', ...arg);
			});
			innerAudioContext.onError((...arg) => {
				that.$emit('onError', ...arg);
			});
			innerAudioContext.src = that.src;
			if (that.initAudio) {
				that.initAudio(innerAudioContext, { src: that.src, index: that.index });
			}
			this.innerAudioContext = innerAudioContext;
		},
		audioPropInit() {
			this.audioTimeUpdate = '00:00';
			this.videoIsPlay = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.luch-audio--text-eill {
	/*超出省略号*/
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.luch-audio__warp {
	display: flex;
	overflow: hidden;
	height: 67px;
	border-radius: 3px;
	border: 1px solid #e0e0e0;
}
.luch-audio__cover {
	position: relative;
	flex-shrink: 0;
	width: 65px;
	height: 100%;
	&.luch-audio--cover-bg {
		background-color: #e6e6e6;
	}
	.luch-audio__cover-img {
		width: 100%;
		height: 100%;
	}
	.luch-audio__play-btn {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 24px;
		height: 24px;
		transform: translateX(-50%) translateY(-50%);
		border-radius: 50%;
		background-size: 100% 100%;
		background-image: url('');
		&.luch-audio--btn-pause {
			background-image: url('');
		}
	}
}
.luch-audio__audio-con {
	position: relative;
	flex: 1;
	display: flex;
	width: 0;
	padding: 0 15px;
	align-items: center;
	background-color: #fcfcfc;
	.luch-audio__audio-info {
		width: 100%;
	}
	.luch-audio__audio-title {
		display: block;
		padding-bottom: 7px;
		padding-right: 25px;
		font-size: 14px;
		color: #353535;
	}
	.luch-audio__audio-author {
		display: block;
		font-size: 12px;
		color: #888888;
	}
	.luch-audio__audio-time {
		position: absolute;
		right: 15px;
		top: 6px;
		font-size: 13px;
		color: #9d9d9d;
	}
}
</style>
